<template>
  <el-form label-position="right" label-width="100px" ref="form" :rules="rules" :model="form">

    <el-row>
      <el-col :span="12">
        <el-form-item label="药品名称" prop="title">
          <el-input v-model="form.title" placeholder="请输入药品名称" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="批准文号" prop="code">
          <el-input v-model="form.code" placeholder="Z20033231" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="当前库存">
          <el-input v-model="quantity" type="number" placeholder="请输入入库数量" disabled></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="损耗数量" prop="quantity">
          <el-input v-model="form.quantity" type="number" placeholder="请输入损耗数量"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="责任人" prop="name">
          <el-input v-model="form.name" placeholder="请输入责任人"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-col>


    </el-row>
    <el-form-item class="contacts-add">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="cancle">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import * as APIMedicalCare from '@/api/medicalCare';
import { mapState } from 'vuex'
export default {
  name: 'manager-add',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ])
  },
  data () {
    return {
      form: {},
      quantity:'',
      // 表单校验
      rules: {
        action: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ],
        quantity: [
          {
            required: true,
            message: '请输入调整数量',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
     // this.medicineGetarr()
  },
  methods: {
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const formData = {
              'mid': this.form['id'],
              'quantity': this.form['quantity'],  //数量
              'name': this.form['name'],  //1增加  2减少
              'remark': this.form['remark']  //备注
          }
          APIMedicalCare.medicineDamaged(formData).then(res => {
            this.$message({ type: "success", message: "调整库存成功!"});
            this.cancle()
            this.load()
          })
        }
      })
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.form.resetFields()
      this.$emit('cancle')
    }
  },
  watch: {
    data: {
      handler (newval) {
        this.quantity = newval['quantity'];
        this.form = { ...newval, ...{ quantity: '', name: '' } };
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
.contacts-add {
  text-align: right;
}
.contract-text {
  font-size: 12px;
  color: #999;
  line-height: 12px;
  margin: 0;
}
.contract-img {
  width: 146px;
  height: 146px;
  cursor: pointer;
}
</style>
